<div class="row">
  <p id="notice"><%= notice %></p>
  <h1><%= @video_category.name %></h1>
</div>
<div class="row">
  <%#= link_to '添加', new_backend_video_category_path, class: "btn btn-info" %>
  <form class="form-inline">
    <input type="text" id="search" placeholder="查询" class="form-control">
  </form>
  <hr>
  <table class="table table-striped table-bordered table-hover table-condensed">
    <thead>
      <tr class="active">
        <th>Name</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% @videos.each do |video|%>
        <tr>
          <td><%= video.album_name %></td>
          <td>
            <%= link_to '详情', backend_video_category_video_path(id: video.id), class: "btn btn-info"%>
            <%#= link_to '移动', backend_video_category_video_path(id: video.id), class: "btn btn-info"%>
            <button type="button" class="btn btn-primary" data-video_id="<%= video.id %>" data-toggle="modal" data-target="#myModal">
              移动
            </button>
            <%#= link_to '修改', edit_backend_video_category_video_path(id: video.id), class: "btn btn-warning"%>
            <%= link_to '下架', backend_video_category_video_path(id: video.id), method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-danger" %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
  <%= paginate @videos %>
</div>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">移动视频到指定分类</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">选择分类:</label>
            <select class="form-control" id="video_category">
              <% @video_categories.each do |vc| %>
                <option value="<%= vc[0] %>"><%= vc[1] %></option>
              <% end %>
            </select>
            <hidden name="video_id" id="hidden_video_id" />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="save">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
  $("#search").keyup(function(event){
    if(event.keyCode == 13){
      var search = $("#search").val()
      window.location.href = "/video_categories/<%= @video_category.id %>/videos?search=" + search;
    }
  });

  $('#myModal').on('show.bs.modal', function (event) {
    
    var button = $(event.relatedTarget);
    var recipient = button.data('video_id');
    
    $('#hidden_video_id').val(recipient);
  });
  $('#save').click(function(e){

    var video_category_id = $("#video_category").val();
    var video_id = $('#hidden_video_id').val();

    $.post("/videos/"+video_id+"/move", 
      {
        video_category_id: video_category_id
      }, function(data){
        if(data.message == 'ok'){
          $('#myModal').modal('hide')
          window.location.href = window.location.href;
        }
      });
  })

</script>